<template>
  <view class="home-comm">
    <z-paging
      :paging-style="{
        height: 'calc(100% - (114rpx + env(safe-area-inset-bottom)))',
      }"
      ref="paging"
      v-model="dataList"
      @query="queryList"
      v-if="!skeletonsLoading"
    >
      <!-- 自定义下拉刷新view(如果use-custom-refresher为true且不设置下面的slot="refresher"，此时不用获取refresherStatus，会自动使用z-paging自带的下拉刷新view) -->
      <!-- 注意注意注意！！字节跳动小程序中自定义下拉刷新不支持slot-scope，将导致custom-refresher无法显示 -->
      <!-- 如果是字节跳动小程序，请参照sticky-demo.vue中的写法，此处使用slot-scope是为了减少data中无关变量声明，降低依赖 -->
      <template #refresher="{ refresherStatus }">
        <!-- 此处的custom-refresh为demo中自定义的组件，非z-paging的内置组件，请在实际项目中自行创建。这里插入什么view，下拉刷新就显示什么view -->
        <CustomRefresher :status="refresherStatus" />
      </template>
      <!-- 自定义没有更多数据view -->
      <template #loadingMoreNoMore>
        <!-- 此处的custom-nomore为demo中自定义的组件，非z-paging的内置组件，请在实际项目中自行创建。这里插入什么view，没有更多数据就显示什么view -->
        <CustomNomore />
      </template>

      <!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
      <view class="list-card">
        <!-- 入库单 -->
        <view v-if="props?.pageData?.type == 'inStock'">
          <uv-sticky bgColor="#fff">
            <uv-tabs
              :list="stockList"
              @change="(e) => handerEvent('inStockListChange', e)"
            ></uv-tabs>
          </uv-sticky>
          <!-- 销售记录列表 -->
          <view class="order-list">
            <uni-card
              v-for="item in dataList"
              :key="item._id"
              :class="['order-card']"
              :shadow="
                item.status == 2
                  ? '0px 0px 3px 1px green'
                  : item.status == 1
                  ? '0px 0px 3px 1px orange'
                  : '0px 0px 3px 1px red'
              "
            >
              <view class="order-header">
                <view class="order-header-left">
                  <text class="order-date">{{ item.date }} </text>
                  <uv-tags
                    v-if="item.isInStock"
                    text="已入库"
                    type="success"
                    size="mini"
                  ></uv-tags>
                  <uv-tags
                    v-else
                    text="未入库"
                    type="error"
                    size="mini"
                  ></uv-tags>
                </view>

                <text class="order-price">¥{{ item.totalAmount }}</text>
              </view>
              <view class="order-content">
                <!-- 修改：添加商品信息显示 -->
                <view class="product-info">
                  <text class="product-name">{{ item.manufacturer }}</text>
                  <text class="product-spec">{{ item.specification }}</text>
                </view>
                <view class="order-info">
                  <text class="info-item">数量：{{ item.quantity }}吨</text>
                  <text class="info-item">单价：¥{{ item.unitPrice }}/吨</text>
                </view>

                <!-- 添加：支付信息 -->
                <view class="payment-info">
                  <text class="payment-item"
                    >已付金额：¥{{ item.paidAmount }}</text
                  >
                  <text
                    :class="[
                      'payment-item',
                      item.remainingAmount > 0
                        ? 'remaining-amount'
                        : 'amount-zero',
                    ]"
                  >
                    剩余金额：¥{{ item.remainingAmount }}
                  </text>
                  <text class="payment-item">
                    状态：
                    <text
                      :style="{
                        color: item.status == 2 ? '#67c23a' : '#f56c6c',
                      }"
                    >
                      {{
                        item.status == 2
                          ? "已支付"
                          : item.status == 1
                          ? "部分支付"
                          : "未支付"
                      }}
                    </text>
                  </text>
                </view>

                <!-- 添加：备注信息 -->
                <view v-if="item.remark" class="order-remark">
                  备注：{{ item.remark }}
                </view>

                <!-- 添加：支付操作按钮 -->
                <!-- <view v-if="item.isPaid" class="action-buttons-row">
                  <button class="pay-btn" @click="openPaymentDialog(item)">
                    查看详情
                  </button>
                  <button class="mark-btn" @click="markAsPaid(item.id)">
                    标记已付
                  </button>
                </view> -->
                <view class="payment-buttons">
                  <uv-button
                    class="payment-button"
                    @click="handerEvent('itemClick', item)"
                    :customStyle="{
                      borderRadius: '10rpx',
                      width: '180rpx',
                    }"
                  >
                    查看详情
                  </uv-button>
                  <uv-button
                    class="payment-button"
                    v-if="!item.isInStock"
                    :disabled="item.isInStock"
                    @click="handerEvent('inStock', item)"
                    type="error"
                    :customStyle="{
                      borderRadius: '10rpx',
                      width: '180rpx',
                    }"
                  >
                    入库
                  </uv-button>
                  <uv-button
                    class="payment-button"
                    type="primary"
                    v-if="item.status != 2"
                    @click="handerEvent('inStockRP', item)"
                    :disabled="item.status == 2"
                    :customStyle="{
                      borderRadius: '10rpx',
                      width: '180rpx',
                    }"
                  >
                    付款
                  </uv-button>
                </view>
              </view>
            </uni-card>
          </view>
        </view>
        <!-- 销售单 -->
        <view v-if="props?.pageData?.type == 'outStock'">
          <uv-sticky bgColor="#fff">
            <uv-tabs
              :list="stockList"
              @change="(e) => handerEvent('outStockListChange', e)"
            ></uv-tabs>
          </uv-sticky>
          <!-- 销售记录列表 -->
          <view class="order-list">
            <uni-card
              v-for="item in dataList"
              :key="item._id"
              :class="['order-card']"
            >
              <view class="order-item">
                <view class="order-header">
                  <text class="order-date">{{ item.date }}</text>
                  <text class="order-price"
                    >¥{{ item.unit_price }}/{{ item.unit }}</text
                  >
                </view>
                <view class="order-content">
                  <!-- 商品信息 -->
                  <view class="product-info">
                    <text class="product-name">{{ item.stock_name }}</text>
                    <text class="product-spec">{{ item.product_spec }}</text>
                  </view>
                  <!-- 订单信息 -->
                  <view class="order-info">
                    <text class="info-item"
                      >数量：{{ item.quantity }}{{ item.unit }}</text
                    >
                    <text class="info-item">总金额：¥{{ item.amount }}</text>
                  </view>
                  <!-- 付款信息 -->
                  <view class="payment-info">
                    <text class="payment-item"
                      >已付金额：¥{{ item.paid_amount }}</text
                    >
                    <text
                      :class="[
                        'payment-item',
                        'remaining-amount',
                        {
                          'amount-zero':
                            item.paid_amount >= item.payable_amount,
                        },
                      ]"
                    >
                      剩余金额：¥{{ item.payable_amount - item.paid_amount }}
                    </text>
                  </view>
                  <!-- 客户信息 -->
                  <view class="customer-info">
                    <view class="customer-info-item">
                      <text class="customer-label">客户：</text>
                      <text class="customer-value">{{
                        item.customer_name
                      }}</text>
                    </view>
                    <view class="customer-info-item">
                      <text class="customer-label">联系方式：</text>
                      <text class="customer-value">{{
                        item.customer_phone
                      }}</text>
                    </view>
                  </view>
                  <!-- 车辆和目的地信息 -->
                  <view class="delivery-info">
                    <text class="info-item"
                      >车号：{{ item.vehicle_number }}</text
                    >
                    <text class="info-item"
                      >目的地：{{ item.delivery_destination }}</text
                    >
                  </view>
                  <!-- 状态标签 -->
                  <view class="status-tag" :class="getStatusClass(item.status)">
                    {{ getStatusText(item.status) }}
                  </view>

                  <!-- 操作按钮 -->
                  <view class="payment-buttons">
                    <uv-button
                      class="payment-button"
                      @click="handerEvent('itemClick', item)"
                      :customStyle="{
                        borderRadius: '10rpx',
                        width: '180rpx',
                      }"
                    >
                      查看详情
                    </uv-button>
                    <uv-button
                      class="payment-button"
                      @click="handerEvent('outStockCO', item)"
                      v-if="item.status == 0"
                      type="error"
                      :customStyle="{
                        borderRadius: '10rpx',
                        width: '180rpx',
                      }"
                    >
                      撤单
                    </uv-button>
                    <uv-button
                      class="payment-button"
                      @click="handerEvent('outStockRP', item)"
                      v-if="item.status != 2"
                      :disabled="item.status == 2"
                      type="primary"
                      :customStyle="{
                        borderRadius: '10rpx',
                        width: '180rpx',
                      }"
                    >
                      收款
                    </uv-button>
                  </view>
                </view>
              </view>
            </uni-card>
          </view>
        </view>
        <!-- 库存 -->
        <!-- 库存 -->
        <view v-else-if="props?.pageData?.type == 'stock'">
          <uv-sticky bgColor="#fff">
            <uv-tabs
              :list="stockList"
              @change="(e) => handerEvent('inStockListChange', e)"
            ></uv-tabs>
          </uv-sticky>
          <!-- 库存记录列表 -->
          <view class="order-list">
            <uni-card
              v-for="item in dataList"
              :key="item._id"
              :class="['order-card']"
            >
              <view class="order-item">
                <view class="order-header">
                  <text class="order-date">{{ item.date }}</text>
                  <text class="order-price"
                    >¥{{ item.unitPrice }}/{{ item.unit }}</text
                  >
                </view>
                <view class="order-content">
                  <!-- 商品信息 -->
                  <view class="product-info">
                    <text class="product-name">{{ item.manufacturer }}</text>
                    <text class="product-spec">{{ item.specification }}</text>
                  </view>
                  <!-- 订单信息 -->
                  <view class="order-info">
                    <text class="info-item"
                      >数量：{{ item.quantity }}{{ item.unit }}</text
                    >
                    <text class="info-item"
                      >总金额：¥{{ item.totalAmount }}</text
                    >
                  </view>
                  <!-- 付款信息 -->
                  <view class="payment-info">
                    <text class="payment-item"
                      >已付金额：¥{{ item.paidAmount || 0 }}</text
                    >
                    <text
                      :class="[
                        'payment-item',
                        'remaining-amount',
                        {
                          'amount-zero': item.isPaid,
                        },
                      ]"
                    >
                      剩余金额：¥{{
                        item.remainingAmount ||
                        item.totalAmount - (item.paidAmount || 0)
                      }}
                    </text>
                  </view>
                  <!-- 客户信息 -->
                  <view class="customer-info">
                    <view class="customer-info-item">
                      <text class="customer-label">客户：</text>
                      <text class="customer-value">{{
                        item.customerName
                      }}</text>
                    </view>
                    <view class="customer-info-item">
                      <text class="customer-label">联系方式：</text>
                      <text class="customer-value">{{
                        item.customerPhone
                      }}</text>
                    </view>
                  </view>
                  <!-- 车辆信息 -->
                  <view class="delivery-info">
                    <text class="info-item"
                      >车号：{{ item.vehicleNumber }}</text
                    >
                    <text class="info-item" v-if="item.remark"
                      >备注：{{ item.remark }}</text
                    >
                  </view>
                  <!-- 状态标签 -->
                  <view
                    class="status-tag"
                    :class="getStockStatusClass(item.isPaid)"
                  >
                    {{ getStockStatusText(item.isPaid) }}
                  </view>

                  <!-- 操作按钮 -->
                  <view class="payment-buttons">
                    <uv-button
                      class="payment-button"
                      @click="handerEvent('itemClick', item)"
                      :customStyle="{
                        borderRadius: '10rpx',
                        width: '180rpx',
                      }"
                    >
                      查看详情
                    </uv-button>
                    <uv-button
                      class="payment-button"
                      @click="handerEvent('stockCO', item)"
                      :disabled="item.isPaid"
                      type="error"
                      :customStyle="{
                        borderRadius: '10rpx',
                        width: '180rpx',
                      }"
                    >
                      撤销
                    </uv-button>
                    <uv-button
                      class="payment-button"
                      @click="handerEvent('stockRP', item)"
                      :disabled="item.isPaid"
                      type="primary"
                      :customStyle="{
                        borderRadius: '10rpx',
                        width: '180rpx',
                      }"
                    >
                      收款
                    </uv-button>
                  </view>
                </view>
              </view>
            </uni-card>
          </view>
        </view>
      </view>
    </z-paging>
    <uv-modal
      :key="modalData?.type"
      ref="modalAddRef"
      :title="modalData?.title"
      :content="modalData?.content"
      :show-confirm-button="false"
      :close-on-click-overlay="false"
    >
      <view class="payment-dialog" v-if="currentData">
        <view class="payment-summary">
          <view class="summary-item">
            <text class="label">订单总额：</text>
            <text class="amount"
              >¥{{ currentData?.amount || currentData?.totalAmount }}</text
            >
          </view>
          <view class="summary-item">
            <text class="label">已付金额：</text>
            <text class="amount paid"
              >¥{{ currentData?.paid_amount || currentData?.paidAmount }}</text
            >
          </view>
          <view class="summary-item">
            <text class="label">剩余金额：</text>
            <text class="amount remaining"
              >¥{{
                currentData.payable_amount - currentData.paid_amount ||
                currentData?.remainingAmount
              }}</text
            >
          </view>
        </view>
        <view class="payment-input-area">
          <text class="payment-label">付款金额：</text>
          <uv-input
            v-model="paymentAmount"
            type="number"
            :max="
              currentData.payable_amount - currentData.paid_amount ||
              currentData?.remainingAmount
            "
            placeholder="请输入付款金额"
            :clearable="true"
          ></uv-input>
        </view>
        <view class="payment-buttons">
          <uv-button
            @click="handerEvent('modalclose')"
            :customStyle="{
              borderRadius: '10rpx',
              width: '180rpx',
            }"
          >
            取消
          </uv-button>
          <uv-button
            type="primary"
            @click="handerEvent('modalconfirm')"
            :disabled="paymentAmount <= 0 || !paymentAmount"
            :customStyle="{
              borderRadius: '10rpx',
              width: '180rpx',
            }"
          >
            确认
          </uv-button>
        </view>
      </view>
    </uv-modal>
    <uv-notify ref="notifyRef"></uv-notify>
  </view>
</template>

<script setup>
import { ref, onMounted, watch, nextTick } from "vue";
import { onShow, onLoad } from "@dcloudio/uni-app";
import CustomNomore from "./components/CustomNomore/index.vue";
import CustomRefresher from "./components/CustomRefresher/index.vue";
import cloudConfig from "@/config/uniCloudConfig.js";
const uniCloudSalesManager = cloudConfig.getCloudObject("outStockManager");

const paging = ref(null);
// v-model绑定的这个变量不要在分页请求结束中自己赋值，直接使用即可
const dataList = ref([]);
const modalAddRef = ref();
const notifyRef = ref();
const modalData = ref();

const loading = ref(true);

const currentData = ref({});
const paymentAmount = ref();

const tabsListState = ref({
  filter: {},
});
const stockList = ref([
  {
    name: "全部",
    key: "all",
  },
  {
    name: "未付款",
    key: 0,
  },
  {
    name: "部分付款",
    key: 1,
  },
  {
    name: "已付清",
    key: 2,
  },
]);
const props = defineProps();

const uniCloudOutSalesManager = cloudConfig.getCloudObject("outStockManager");
const uniCloudInSalesManager = cloudConfig.getCloudObject("inStockManager");

const emits = defineEmits(["onButtonClick"], ["onItemClick"]);

// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可
const queryList = async (pageNum, pageSize) => {
  // 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
  // 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
  // 模拟请求服务器获取分页数据，请替换成自己的网络请求

  // paging.value.complete(demooutStockData)
  // 模拟数据
  const userInfo = uni.getStorageSync("userInfo");
  if (props?.pageData?.type == "outStock") {
    // 查询当前登陆人的数据
    let filters = {
      user_id: userInfo._id,
      ...tabsListState.value.filter,
    };
    console.log(filters, "====filters====filters");
    let salesList = await uniCloudOutSalesManager.getOutSalesRecords(
      pageNum,
      pageSize,
      filters
    );
    // let salesList = await uniCloudOutSalesManager.getTenantSalesRecords('test1', pageNum, pageSize)
    console.log(salesList, "===salesList=outStock==");
    paging.value.complete(salesList.data);
  }
  if (props?.pageData?.type == "inStock") {
    // 查询当前登陆人的数据
    let filters = {
      userId: userInfo._id,
      ...tabsListState.value.filter,
    };
    // 查询当前登陆人的数据
    let salesList = await uniCloudInSalesManager.getInStockRecords(
      pageNum,
      pageSize,
      filters
    );
    // let salesList = await uniCloudOutSalesManager.getTenantSalesRecords('test1', pageNum, pageSize)
    console.log(salesList, "===salesList=inStock==");
    paging.value.complete(salesList.data);
  }

  // const params = {
  // 	pageNo: pageNum,
  // 	pageSize: pageSize,
  // 	type: 1
  // }
  // request.queryList(params).then(res => {
  // 	// 将请求的结果数组传递给z-paging
  // 	paging.value.complete(res.data.list);
  // }).catch(res => {
  // 	// 如果请求失败写this.$refs.paging.complete(false);
  // 	// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
  // 	// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
  // 	paging.value.complete(false);
  // })
};
onLoad((option) => {
  console.log(option, "==home=option====");
  paging?.value?.reload();
});

const getInit = async () => {
  console.log("getInit====home======");
};

const handerEvent = async (eType, eData) => {
  const userInfo = uni.getStorageSync("userInfo");

  switch (eType) {
    case "inStockListChange":
    case "outStockListChange":
      if (eData?.key == "all") {
        tabsListState.value.filter = {};
      } else {
        tabsListState.value.filter.status = eData?.key;
      }
      // tabsListState.value.filter.status = eData?.key;
      paging.value.reload();
      break;

    case "modalclose":
      modalAddRef?.value?.close();
      break;
    case "itemClick":
      modalAddRef?.value?.close();
      // 点击列表的每一项
      emits("onItemClick", eData);
      break;

    case "modalconfirm":
      switch (modalData.value.type) {
        case "inStockRP":
          // 收款
          // 处理paymentAmount 有可能为 0开头的整数需要给提示
          if (paymentAmount.value.startsWith("0")) {
            notifyRef.value.warning("收款金额不能以0开头");
            return;
          }
          // 处理paymentAmount 有可能为小数需要给提示
          if (paymentAmount.value.includes(".")) {
            notifyRef.value.warning("收款金额不能为小数");
            return;
          }
          if (paymentAmount.value > currentData.value.remainingAmount) {
            notifyRef.value.warning("收款金额不能大于剩余金额");
            return;
          }

          // 二次确认
          uni.showModal({
            title: "确认收款",
            content: `确认收款金额为 ¥${paymentAmount.value} 吗？`,
            success: async (res) => {
              try {
                if (res.confirm) {
                  const paidAmount =
                    currentData.value.paidAmount + Number(paymentAmount.value);
                  const remainingAmount =
                    currentData.value.remainingAmount -
                    Number(paymentAmount.value);
                  //更新参数
                  const data = {
                    paidAmount,
                    remainingAmount,
                    status: remainingAmount > 0 ? 1 : 2,
                  };
                  const res = await uniCloudInSalesManager.updateInStockRecord(
                    currentData.value._id,
                    data
                  );

                  if (res.code == 0) {
                    notifyRef.value.success("收款成功");
                    paging?.value?.reload();
                    currentData.value = null;
                    paymentAmount.value = null;
                    modalData.value = null;
                    modalAddRef?.value?.close();
                  } else {
                    notifyRef.value.error("收款失败");
                  }
                }
              } catch (error) {
                console.log(error, "====error===");
              }
            },
          });
          break;
        case "outStockRP":
          // 收款
          // 处理paymentAmount 有可能为 0开头的整数需要给提示
          if (paymentAmount.value.startsWith("0")) {
            notifyRef.value.warning("收款金额不能以0开头");
            return;
          }
          // 处理paymentAmount 有可能为小数需要给提示
          if (paymentAmount.value.includes(".")) {
            notifyRef.value.warning("收款金额不能为小数");
            return;
          }
          if (
            paymentAmount.value >
            currentData.value.payable_amount - currentData.value.paid_amount
          ) {
            notifyRef.value.warning("收款金额不能大于剩余金额");
            return;
          }

          // 二次确认
          uni.showModal({
            title: "确认收款",
            content: `确认收款金额为 ¥${paymentAmount.value} 吗？`,
            success: async (res) => {
              try {
                if (res.confirm) {
                  console.log(modalData.value, "====modalData.value===");
                  console.log(currentData.value, "====currentData.value===");
                  console.log(
                    paymentAmount.value,
                    "====paymentAmount.value==="
                  );

                  currentData.value.paid_amount += Number(paymentAmount.value);
                  if (currentData.value.status == 0) {
                    currentData.value.status == 1;
                  }
                  if (currentData.value.paid_amount==currentData.value.payable_amount) {
                    currentData.value.status == 2;
                  }
                  let newCurrentData = {
                    ...currentData.value,
                  };
                  Reflect.deleteProperty(newCurrentData, "_id");
                  console.log(modalData.value, "====modalData.value=1==");
                  console.log(currentData.value, "====currentData.value=1==");
                  console.log(newCurrentData, "====newCurrentData=1==");
                  debugger;
                  let res = await uniCloudOutSalesManager.updateSalesRecord(
                    currentData.value._id,
                    newCurrentData
                  );

                  if (res.code == 0) {
                    notifyRef.value.success("收款成功");
                    // paging?.value?.reload();
                    currentData.value = null;
                    paymentAmount.value = null;
                    modalData.value = null;
                    modalAddRef?.value?.close();
                  } else {
                    notifyRef.value.error("收款失败");
                  }
                }
              } catch (error) {
                console.log(error, "====error===");
              }
            },
          });

          break;
        default:
          break;
      }
      break;
    case "outStock":
      console.log(dataList, "====dataList====dataList");
      console.log(eData, "====data=====");
      // emits('onButtonClick', item)
      modalData.value = {
        type: "outStockStatus",
        title: "确定已经汇款了吗？?",
        content: "",
        data: eData,
      };
      nextTick(() => {
        modalAddRef?.value?.open();
      });
      // let updateFind = dataList.value.find((f) => f._id == data._id)
      // updateFind.status = 1
      // await uniCloudOutSalesManager.updateSalesRecord(data._id, {
      // 	status: 1
      // })
      break;
    case "inStockRP": //入库收款
      currentData.value = eData;
      modalData.value = {
        type: "inStockRP",
        title: "汇款时请检查无误后点确认！",
        content: "",
        data: eData,
      };
      nextTick(() => {
        modalAddRef?.value?.open();
      });
      break;
    case "outStockRP": //出库收款
      currentData.value = eData;
      modalData.value = {
        type: "outStockRP",
        title: "汇款时请检查无误后点确认！",
        content: "",
        data: eData,
      };
      nextTick(() => {
        modalAddRef?.value?.open();
      });
      break;
    case "outStockCO": // 撤单
      // const res = await uniCloudSalesManager.revertOutStock(
      //   eData._id,
      //   userInfo._id
      // );
      // if (res.code == 0) {
      //   notifyRef.value.success(res.message);
      //   paging?.value?.reload();
      // } else {
      //   notifyRef.value.error(res.message);
      // }
      // 二次确认
      uni.showModal({
        title: "确认撤销",
        content: `确认撤销吗？该操作会重新计入库存！`,
        success: async (res) => {
          try {
            if (res.confirm) {
              const res = await uniCloudSalesManager.revertOutStock(
                eData._id,
                userInfo._id
              );
              if (res.code == 0) {
                notifyRef.value.success(res.message);
                paging?.value?.reload();
              } else {
                notifyRef.value.error(res.message);
              }
            }
          } catch (error) {
            console.log(error, "====error===");
          }
        },
      });

      break;
    case "inStock": // 入库单设置入库
      // 二次确认
      uni.showModal({
        title: "确认入库",
        content: `确认入库吗？`,
        success: async (res) => {
          try {
            if (res.confirm) {
              const res = await uniCloudInSalesManager.updateInStockRecord(
                eData._id,
                { isInStock: true }
              );
              if (res.code == 0) {
                notifyRef.value.success("入库成功");
                paging?.value?.reload();
              } else {
                notifyRef.value.error("入库失败");
              }
            }
          } catch (error) {
            console.log(error, "====error===");
          }
        },
      });

      break;
    default:
      break;
  }
};

// 获取状态类
const getStatusClass = (status) => {
  const statusMap = {
    0: "status-unpaid",
    1: "status-alert",
    2: "status-paid",
  };
  return statusMap[status] || "";
};

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    0: "未付款",
    1: "部分付款",
    2: "已付清",
  };
  return statusMap[status] || "";
};

onShow(() => {
  console.log("show home");
  paging?.value?.reload();
});

// watch(() => props.pageData, () => {
// 	console.log( props,"===== props.pageData props.pageData");
// 	console.log( props.pageData.type,"===== type.type type.type");
// 	getInit()
// }, {
// 	immediate: true,
// 	deep: true
// })

onMounted(() => {
  console.log(props, "===== props.pageData props.pageData");
  console.log(props?.pageData?.type, "===== type.type type.type");
  getInit();
  // uni.showLoading({
  // 	title: "加载中",
  // 	mask: true
  // });
  // getInit()
  // console.log(props, "===props===props===");
  // setTimeout(() => {
  // 	uni.hideLoading()
  // }, 1500)
});
</script>

<style scoped lang="scss">
.home-comm {
  height: 100%;
  overflow: hidden;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;

  .list-card {
    //padding: 40rpx;

    .item {
      width: 100%;
      position: relative;
      min-height: 400rpx;
      margin-bottom: 50rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0 24rpx;
      box-sizing: border-box;

      // 渐变边框 伪元素+透明边框
      background: #fff;
      border: 4rpx solid transparent;
      background-clip: padding-box, border-box;
      background-origin: padding-box, border-box;
      // background-image: linear-gradient(to right, #fff, #fff), linear-gradient(90deg, #8f41e9, #578aef);

      .serial-number {
        // position: absolute;
        height: 60rpx;
        line-height: 80rpx;
        display: flex;
        align-items: center;
        padding-left: 14rpx;
        padding-right: 14rpx;
        font-size: 36rpx;
        min-width: 100rpx;
        color: #0152a1;
        position: absolute;
        top: -16px;
        background: #fff;
      }

      .item-status {
        width: 100%;
        height: 40rpx;
        position: relative;

        .item-status-item {
          font-size: 28rpx;
          line-height: 70rpx;
          color: #fff;
          text-align: center;
          width: 160rpx;
          height: 60rpx;
          /* 透明遮罩+soft-light 给标签打上一层高光 */
          // background: linear-gradient(135deg, rgba(255, 255, 255, .4), transparent) #91C8F8;
          background-blend-mode: soft-light;
          display: inline-block;
          border-radius: 15rpx 15rpx 0 15rpx;
          position: absolute;
          right: -48rpx;
          top: -16rpx;

          &::after {
            position: absolute;
            content: "";
            clip-path: polygon(0rpx 0rpx, 0rpx 24rpx, 24rpx 0rpx);
            width: 24rpx;
            height: 24rpx;
            right: 0;
            bottom: -24rpx;
            /* 颜色变暗：filter滤镜、半透明遮罩 */
            /* 使用filter滤镜 使颜色变暗 */
            /*filter: brightness(.6);*/
            /* 给颜色上添加一个半透明遮罩实现颜色变暗 */
            background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
            background-color: inherit;
            /* 继承 */
          }
        }
      }

      .item-title {
        width: 100%;
        overflow: hidden;
        font-size: 36rpx;
        /* 多行文本溢出 隐藏超出部分省略号代替 */
        overflow: hidden;
        text-overflow: ellipsis;
        /* 因为要做多行文本溢出隐藏，要基于webkit内核的，常规的属性搞不定 */
        display: -webkit-box;
        /* 基于webkit盒模型设置对齐方式 - 纵向对齐 */
        -webkit-box-orient: vertical;
        /* 设置多行的行数 */
        -webkit-line-clamp: 2;
        color: #0052a3;
        margin-top: 28rpx;
      }

      // .item-detail {
      // 	width: 100%;
      // 	overflow: hidden;
      // 	font-size: 36rpx;
      // 	/* 多行文本溢出 隐藏超出部分省略号代替 */
      // 	overflow: hidden;
      // 	text-overflow: ellipsis;
      // 	/* 因为要做多行文本溢出隐藏，要基于webkit内核的，常规的属性搞不定 */
      // 	display: -webkit-box;
      // 	/* 基于webkit盒模型设置对齐方式 - 纵向对齐 */
      // 	-webkit-box-orient: vertical;
      // 	/* 设置多行的行数 */
      // 	-webkit-line-clamp: 2;
      // 	color: #0052A3;
      // 	margin-top: 28rpx;
      // }

      .type-detail {
        padding: 26rpx 14rpx;
        // background: rgba(193, 213, 232, .3);
        margin-top: 16rpx;
        width: 90%;
      }
    }
  }
}

.order-list {
  padding: 6rpx 0;
}

.order-card {
  margin-bottom: 10px;
  border-radius: 8px;
  background-color: #fff;
  overflow: hidden;
}

.order-card:last-child {
  margin-bottom: 0;
}

.order-item {
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.order-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.order-date {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.order-price {
  font-size: 16px;
  font-weight: bold;
  color: #f56c6c;
}

.order-content {
  border-top: 1px solid #eee;
  padding-top: 15px;
}

.product-info {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.product-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.product-spec {
  padding: 2px 8px;
  background-color: #f5f5f5;
  border-radius: 4px;
  font-size: 13px;
  color: #666;
}

.order-info,
.payment-info,
.delivery-info {
  margin-bottom: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.info-item {
  color: #666;
  font-size: 14px;
}

.payment-info {
  background-color: #f8f8f8;
  padding: 12px;
  border-radius: 4px;
}

.payment-item {
  color: #666;
  font-size: 14px;
}

.remaining-amount {
  color: #f56c6c;
  font-weight: 500;
}

.amount-zero {
  color: #67c23a;
}

.customer-info {
  display: flex;
  flex-direction: column;
  // align-items: center;
  background-color: #f8f8f8;
  padding: 12px;
  border-radius: 4px;
  margin-bottom: 15px;

  .customer-info-item {
    display: flex;
  }
}

.customer-label {
  color: #666;
  margin-right: 8px;
}

.customer-value {
  font-weight: 500;
  color: #333;
}

.customer-phone {
  margin-left: 12px;
  color: #666;
  font-size: 14px;
}

.status-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
}

.status-unpaid {
  background-color: #fef0f0;
  color: #f56c6c;
}

.status-alert {
  background-color: #fdf6ec;
  color: #e6a23c;
}

.status-paid {
  background-color: #e1f3d8;
  color: #67c23a;
}

.payment-dialog {
  padding: 10rpx;
  width: 100%;

  .payment-summary {
    background-color: #f8f8f8;
    border-radius: 12rpx;
    padding: 24rpx;
    margin-bottom: 30rpx;

    .summary-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .label {
        color: #666;
        font-size: 28rpx;
      }

      .amount {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;

        &.paid {
          color: #19be6b;
        }

        &.remaining {
          color: #fa3534;
        }
      }
    }
  }

  .payment-input-area {
    display: flex;
    align-items: center;
    padding: 0 10rpx;

    .payment-label {
      font-size: 28rpx;
      color: #333;
      margin-right: 20rpx;
      white-space: nowrap;
    }

    :deep(.uv-input) {
      flex: 1;

      .uv-input__input {
        height: 80rpx;
        font-size: 28rpx;
      }
    }
  }
}

.payment-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 20rpx;
}
</style>
